<template>
  <div class="px-2">
    <div class="flex items-center justify-between px-2 pt-3.5 border-b border-gray-200">
      <div class="flex items-center tab-nav pos-relative">
        <div
          class="line pos-absolute"
          :style="'transform: translateX(' + transformStyle + 'px)'"
        ></div>
        <div
          class="mr-5 item pb-3"
          :class="{ active: tabType === 'common' }"
          @click="handleTabClick($event, 'common')"
        >
          <span class="text-4">常用地址</span>
        </div>
        <div
          class="mr-5 item pb-3"
          :class="{ active: tabType === 'new' }"
          @click="handleTabClick($event, 'new')"
        >
          <span class="text-4">选择新地址</span>
        </div>
      </div>
      <span @click="$emit('close')" style="transform: translateY(-10px);">
        <el-icon size="20"><Close /> </el-icon>
      </span>
    </div>
    <div>
      <div v-if="tabType == 'common'" class="px-2">
        <el-scrollbar height="230px">
          <div class="flex flex-wrap address-list mt-2">
            <div
              class="item cursor-pointer mt-2 mr-2 p-2 mb-2 border-rounded-sm bg-gray-50"
              style="width: 48%"
              v-for="item in addressList"
              :class="{ active: item.isActive }"
              :key="item.id"
              @click="handleAddressClick(item)"
            >
              <span class="mr-3 font-600 text-gray-700">{{ item.name }}</span>
              <span class="mr-3 text-gray-700">{{ item.phone }}</span>
              <p class="pt-2 text-gray-500">{{ item.address }}</p>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div v-if="tabType == 'new'" class="mt-2.5 px-2">
        <Regionselector />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Close } from "@element-plus/icons-vue";
import { addressData } from "@/mock/data/address";

import Regionselector from "./Regionselector.vue";

const tabType = ref("common");
const transformStyle = ref(0);
const addressList = ref<any[]>(Object.assign([], addressData));

const currentAddress = ref(addressList.value[0]);
const handleAddressClick = (item: any) => {
  currentAddress.value = item;
  addressList.value.forEach((addr) => {
    addr.isActive = addr.id === item.id;
  });
};
const handleTabClick = (e: any, type: string) => {
  if (tabType.value === type) return;
  const element = e.target;
  const width = element.offsetWidth;
  const left = element.offsetLeft;
  transformStyle.value = left + width / 2 - 22.5;
  tabType.value = type;
};

onMounted(() => {
  addressList.value.forEach((item: any) => {
    item.isActive = item.id === currentAddress.value.id;
  });
});
</script>
<style scoped lang="scss">
.tab-nav {
  .item {
    cursor: pointer;
  }
  .line {
    display: block;
    width: 45px;
    height: 3px;
    background-color: #ff0000;
    margin-top: 4px;
    bottom: 0;
    transition: all 0.3s ease-in-out;
  }
  .active {
    font-weight: 600;
  }
}

.address-list {
  .item {
    border: 1px solid #f5f5f5;
    border-radius: 5px;
    &.active,
    &:hover {
      border: 1px solid #ff0000da;
      background-color: #fdfdfdfa;
    }
  }
}
</style>
